<template>
  <view class="flex justify-center items-center h-100vh w-full overflow-hidden" :style="gradientStyle">
    <!-- 振动模式网格 -->
    <view class="w-full h-750rpx">
      <view class="grid grid-cols-3 grid-rows-3 gap-x-40rpx gap-y-80rpx">
        <!-- 第一行 -->
        <view v-for="(mode, index) in vibrationModes" :key="index" class="flex flex-col items-center"
          @click="selectMode(mode)">
          <view class="w-150rpx h-150rpx mb-20rpx flex justify-center items-center">
            <view
              class="w-120rpx h-120rpx overflow-hidden border-1rpx border-solid rounded-full border-fff flex justify-center items-center"
              :class="{
                'bg-white': selectedMode == mode.id,
              }">
              <image :src="mode.image" class="w-100rpx h-100rpx rounded-full" mode="scaleToFill" />
            </view>
          </view>
          <text class="text-white text-30rpx">{{ mode.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { onReady, onUnload, onLoad } from "@dcloudio/uni-app";
import { str2ab } from '../../utils/index.js'

import img1 from '../../static/menu/1.png'
import img2 from '../../static/menu/2.png'
import img3 from '../../static/menu/3.png'
import img4 from '../../static/menu/4.png'
import img5 from '../../static/menu/5.png'
import img6 from '../../static/menu/6.png'
import img7 from '../../static/menu/7.png'
import img8 from '../../static/menu/8.png'
import img9 from '../../static/menu/9.png'

// 模拟振动模式数据
const vibrationModes = ref([
  {
    id: 1,
    name: '情窦初开',
    msg: '0x10',
    image: img1,
  },
  {
    id: 2,
    name: '渐入佳境',
    msg: '0x11',
    image: img2,
  },
  {
    id: 3,
    name: '极致巅峰',
    msg: '0x12',
    image: img3,
  },
  {
    id: 4,
    name: '激情澎湃',
    msg: '0x13',
    image: img4,
  },
  {
    id: 5,
    name: '热血沸腾',
    msg: '0x14',
    image: img5,
  },
  {
    id: 6,
    name: '心潮涌动',
    msg: '0x15',
    image: img6,
  },
  {
    id: 7,
    name: '跌宕起伏',
    msg: '0x16',
    image: img7,
  },
  {
    id: 8,
    name: '心花怒放',
    msg: '0x17',
    image: img8,
  },
  {
    id: 9,
    name: '蜂缠蝶恋',
    msg: '0x18',
    image: img9,
  },
]);

// 渐变背景样式
const gradientStyle = ref({
  background: 'linear-gradient(to bottom, #f472b6 0%, #f472b6 30%, #fb923c 100%)',
});

const deviceId = ref('')
const serviceId = ref('')
const characteristicId = ref('')
const name = ref('')
const advertisServiceUUIDs = ref([])

// 当前选中的模式
const selectedMode = ref(null)
const interval = ref(null)

// 选择模式
const selectMode = (mode) => {
  console.log('mode:', mode)
  selectedMode.value = mode.id

  clearInterval(interval.value)

  // 这里可以添加发送振动模式到设备的逻辑
  interval.value = setInterval(() => {
    sendVibrationMode(mode.msg)
  }, 1000)
}

// 发送振动模式到设备
const sendVibrationMode = (msg) => {
  // 向蓝牙设备发送一个0x00的16进制数据

  return new Promise((resolve, reject) => {
    console.log('msg', msg)

    let buffer = str2ab(msg)
    console.log('msg', msg)
    console.log('buffer', buffer)

    console.log(
      'deviceId:' + deviceId.value,
      'serviceId:' + serviceId.value,
      'characteristicId:' + characteristicId.value,
    )

    uni.writeBLECharacteristicValue({
      deviceId: deviceId.value,
      serviceId: serviceId.value,
      characteristicId: characteristicId.value,
      value: buffer,
      writeType: 'write',
      success(res) {
        console.log('res', res)
        console.log('msg success', msg)
        resolve(res)
      },
      fail(err) {
        console.log('write指令发送失败', err)
        reject(err)
      },
    })
  })
}

onUnload(() => {
  clearInterval(interval.value)
  sendVibrationMode('0x00')
})

onLoad(() => {
  deviceId.value = uni.getStorageSync('deviceId') || ''
  serviceId.value = uni.getStorageSync('serviceId') || ''
  characteristicId.value = uni.getStorageSync('characteristicId') || ''
  name.value = uni.getStorageSync('name') || ''
  advertisServiceUUIDs.value = uni.getStorageSync('advertisServiceUUIDs') || []
})
</script>
<style>
.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.h-100vh {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.grid {
  display: grid;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.gap-x-40rpx {
  column-gap: 40rpx;
}

.gap-y-80rpx {
  row-gap: 80rpx;
}

.flex-col {
  flex-direction: column;
}

.w-150rpx {
  width: 150rpx;
}

.h-150rpx {
  height: 150rpx;
}

.mb-20rpx {
  margin-bottom: 20rpx;
}

.w-120rpx {
  width: 120rpx;
}

.h-120rpx {
  height: 120rpx;
}

.border-1rpx {
  border-width: 1rpx;
}

.border-solid {
  border-style: solid;
}

.rounded-full {
  border-radius: 9999px;
}

.border-fff {
  border-color: #ffffff;
}

.bg-white {
  background-color: white;
}

.border-#ffffff20 {
  border-color: #fff;
}

.w-100rpx {
  width: 100rpx;
}

.h-100rpx {
  height: 100rpx;
}

.text-white {
  color: white;
}

.text-30rpx {
  font-size: 30rpx;
}
</style>